import { Typography, Radio } from "antd";
import styles from "./index.module.less";
import procressBar from "../../../assets/images/procressBar.png";

const { Text } = Typography;
const Index = ({
  title = "CT4",
  lowOrder = 30, // 低位
  lowPosition = 10, // 低低位
  highOrder = 220, // 高位
  highPosition = 250, // 高高位
  superelevation = 280, // 超高位
  totaHoldCapacity = 300, // 总舱容
  currentHoldCapacity = 100, // 当前舱容
}) => {
  const outerHeight = 376;
  const getHeight = (value) => {
    const height = Math.floor((value / totaHoldCapacity) * (outerHeight - 10));
    return height;
  };

  const array = [
    {
      name: "顶部温度",
      value: "-162.21 ℃",
      code: 1,
    },
    {
      name: "75%温度",
      value: "-162.21 ℃",
      code: 2,
    },
    {
      name: "50%温度",
      value: "-162.21 ℃",
      code: 3,
    },
    {
      name: "25%温度",
      value: "-162.21 ℃",
      code: 4,
    },
    {
      name: "底部温度",
      value: "-162.21 ℃",
      code: 5,
    },
  ];

  const temperatureArray = [
    {
      name: "气体平均温度",
      value: "-162.21 ℃",
      code: 1,
    },
    {
      name: "液体平均温度",
      value: "-162.21 ℃",
      code: 2,
    },
  ];

  const liquidArray = [
    {
      name: "当前液位",
      value: "22.22 m",
      code: 1,
    },
    {
      name: "修正液位",
      value: "22.22 m",
      code: 2,
    },
    {
      name: "货舱压力",
      value: "22.22 kPa",
      code: 3,
    },
  ];
  const volumeArray = [
    {
      name: "当前液位",
      value: "22.22 m",
      code: 1,
    },
    {
      name: "修正液位",
      value: "22.22 m",
      code: 2,
    },
    {
      name: "货舱压力",
      value: "22.22 kPa",
      code: 3,
    },
  ];
  return (
    <div className={styles.cardBox}>
      <div className={styles.topTitle}>
        <Text className={styles.titleName}>{title}</Text>
        <Radio.Group defaultValue="a" size="middle">
          <Radio.Button value="a">货舱</Radio.Button>
          <Radio.Button value="b">货泵</Radio.Button>
        </Radio.Group>
      </div>
      <div className={styles.procressBox}>
        <div className={styles.left}>
          <div className={styles.leftBox}>
            <div className={styles.nameBox}>
              <Text className={styles.name}>满舱报警</Text>
              <div className={styles.circle} />
            </div>
            <div
              className={styles.nameBox}
              style={{
                position: "absolute",
                bottom: getHeight(superelevation) - 10,
              }}
            >
              <Text className={styles.name}>超高位警报</Text>
              <div className={styles.circle} />
            </div>
            <div
              className={styles.nameBox}
              style={{
                position: "absolute",
                bottom: getHeight(highPosition) - 10,
              }}
            >
              <Text className={styles.name}>高高位警报</Text>
              <div className={styles.circle} />
            </div>
            <div
              className={styles.nameBox}
              style={{
                position: "absolute",
                bottom: getHeight(highOrder) - 10,
              }}
            >
              <Text className={styles.name}>高位警报</Text>
              <div className={styles.circle} />
            </div>
            <div
              className={styles.nameBox}
              style={{ position: "absolute", bottom: getHeight(lowOrder) - 10 }}
            >
              <Text className={styles.name}>低位警报</Text>
              <div className={styles.circle} />
            </div>
            <div
              className={styles.nameBox}
              style={{
                position: "absolute",
                bottom: getHeight(lowPosition) - 10,
              }}
            >
              <Text className={styles.name}>低低位警报</Text>
              <div className={styles.circle} />
            </div>
          </div>
          <div style={{ height: outerHeight }} className={styles.outerBox}>
            <div
              className={styles.innerBox}
              style={{ height: getHeight(currentHoldCapacity) }}
            >
              <div className={styles.bar} style={{ height: outerHeight }} />
            </div>

            <div
              className={styles.lowOrder}
              style={{ bottom: getHeight(lowOrder) }}
            />
            <div
              className={styles.lowPosition}
              style={{ bottom: getHeight(lowPosition) }}
            />
            <div
              className={styles.highOrder}
              style={{ bottom: getHeight(highOrder) }}
            />
            <div
              className={styles.highPosition}
              style={{ bottom: getHeight(highPosition) }}
            />
            <div
              className={styles.superelevation}
              style={{ bottom: getHeight(superelevation) }}
            />
          </div>
        </div>

        <div className={styles.right}>
          {array.map((item, index) => (
            <div className={styles.item} key={index}>
              <div className={styles.name}>{item.name}</div>
              <div className={styles.valueBox}>
                <Text className={styles.value}>{item.value}</Text>
                <div className={styles.history} />
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className={styles.bottom}>
        <div className={styles.temperature}>
          {temperatureArray.map((item, index) => (
            <div className={styles.item} key={index}>
              <div className={styles.name}>{item.name}</div>
              <div className={styles.valueBox}>
                <div className={styles.value}>{item.value}</div>
                <div className={styles.history} />
              </div>
            </div>
          ))}
        </div>
        <div className={styles.liquid}>
          {liquidArray.map((item, index) => (
            <div className={styles.item} key={index}>
              <div className={styles.name}>{item.name}</div>
              <div className={styles.valueBox}>
                <div className={styles.value}>{item.value}</div>
                <div className={styles.history} />
              </div>
            </div>
          ))}
        </div>
        <div className={styles.line} />
        <div className={styles.volume}>
          {volumeArray.map((item, index) => (
            <div className={styles.item} key={index}>
              <div className={styles.name}>{item.name}</div>
              <div className={styles.valueBox}>
                <div className={styles.value}>{item.value}</div>
                <div className={styles.history} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Index;
